import React, { useEffect, useRef, useState } from 'react';
import {
  getLoginUser,
  userListApi,
  UserListInter,
  UserListQueryInter,
} from '@/service/userNew';
import TableList from './components/TableList';
import TableForm from './components/TableForm';
import './List.less';
import { Button } from 'antd';
import TableModal from './components/TableModal';

export default function List() {
  const [listData, setListData] = useState<UserListInter>({} as UserListInter);
  const resultData = useRef({});
  const [pageData, setPageData] = useState({ page: 1, pageSize: 10 });
  const [editData, setEditData] = useState({});
  const [isModalOpen, setIsModalOpen] = useState(false);
  //   function test(){
  //     setPageData({page:1,pageSize:200})
  //     pageData.pageSize // 10
  //   }
  const formData = useRef({});
  //   function onFinish(data) {
  //     formData.current = data;
  //     getData(data);
  //   }
  //   function handlePageChange(data) {
  //     page.current = data;
  //     console.log('----state----', testData);
  //     getData(data);
  //   }
  // 可以把上一份请求的数据保存一份，在下次请求的时候，把上次请求的数据带上，然后改变其中有改变的部分
  const getData = async (
    data: UserListQueryInter = { page: 1, pageSize: 10 },
  ) => {
    // 用现在的数据把以前的数据覆盖掉，就可以实现数据的更新
    const passDataResult = { ...resultData.current, ...data };
    console.log('请求的参数', passDataResult);
    // 不能在此处改变ref的值？？？
    // useState 在函数内部拿到的值是有问题的，还是空的
    const res = await userListApi(passDataResult);
    // 将现在的请求数据进行缓存
    resultData.current = passDataResult;
    // pageData可以从接口取  也可以从你的数据里面取
    setPageData({
      page: passDataResult.page,
      pageSize: passDataResult.pageSize,
    });
    setListData(res);
  };
  // 第二种实现方式，可以实时将form中的数据带出来保存
  const getData2 = async (data: UserListQueryInter) => {
    // 把实时保存的formData 以及 pageData  还有现在传入的data进行合并
    // 因为pageData保存在state里面，所以不能实时更新，所以需要将data也进行合并
    const passDataResult = { ...formData.current, ...pageData, ...data };
    console.log('请求列表成功！的参数', passDataResult);
    // 不能在此处改变ref的值？？？
    // useState 在函数内部拿到的值是有问题的，还是空的
    const res = await userListApi(passDataResult);
    // 将现在的请求数据进行缓存
    resultData.current = passDataResult;
    // pageData可以从接口取  也可以从你的数据里面取
    setPageData({
      page: passDataResult.page,
      pageSize: passDataResult.pageSize,
    });
    setListData(res);
  };
  const onReset = (value: any) => {
    const resultData = { ...value, page: 1, pageSize: 10 };
    getData(resultData);
  };
  const onValuesChange = (values: any) => {
    formData.current = values;
  };
  const onModalSuccess = () => {
    setIsModalOpen(false);
    getData();
  };
  const handleEdit = (data) => {
    setEditData(data);
    setIsModalOpen(!isModalOpen);
  };
  const handleCreateUser = () => {
    setEditData({});
    setIsModalOpen(!isModalOpen);
  };
  useEffect(() => {
    getData();
    // getLoginUser();
  }, []);
  return (
    <div className="my-content-wrapper">
      {JSON.stringify(editData)}
      <TableForm
        onFinish={getData}
        onReset={onReset}
        onValuesChange={onValuesChange}
      />
      <Button type="primary" onClick={handleCreateUser}>
        新增
      </Button>
      <TableList
        data={listData}
        pageData={pageData}
        handlePageChange={getData}
        handleEdit={handleEdit}
      />
      <TableModal
        isModalOpen={isModalOpen}
        onSuccess={onModalSuccess}
        editData={editData}
        changeIsOpen={() => setIsModalOpen(!isModalOpen)}
      />
    </div>
  );
}
